{% extends 'layout.html' %}

{% block css %}

    {% load staticfiles %}
    <style>

        .del {
            margin-top: 25px;
            text-align: center;
            width: 50px;
            cursor: pointer;
            line-height: 26px;
            font-size: 14px;
            color: white;
            margin-left: 90px;
            background-image: url("{% static 'image/qq.jpeg' %}");
        }

    </style>
{% endblock %}

{% block menus %}
    {{ menu_string | safe }}
{% endblock %}

{% block content %}

        <form method="get">
			<span class="add">Name</span><input type="text" id="service" class="input-all"  autocomplete="off">
            <span id="ser" style="display: none">输入Service的名字</span>
            <p>
            <span class="add">type</span><input type="text" class="input-all" name="type">
            <!--<select id="type">
                <option >chess</option>
                <option >hunter</option>
                <option >swf</option>
            </select>-->
            </p>
            <p><span class="add">Tags</span> <textarea id="t" style="margin-left: -5px;width: 170px" class="input-all" name="tags"></textarea></p>
            <p><span class="add">Adress</span> <input id="a" type="text" style="margin-left: -5px" class="input-all" name="address"  autocomplete="off"/></p>
            <!--<p><span class="add">Port</span><input type="radio" name="port" value="443" checked> 443 <input type="radio" name="port" value="8888"> 8888</p>-->
            <p><span class="add">Port</span> <input id="xxx" type="text" style="margin-left: -5px" class="input-all" name="port"></p>
            <div id="ret" style="color: chocolate;margin-left: 15px"></div>
            <div id="sub" style="margin-left: 83px" class="btn-all">提交</div>
        </form>


{% endblock %}

{% block js %}
    <script src="/static/js/jquery-1.4.2.min.js" type="text/javascript"></script>
	<script src="/static/js/input-autocomplete.js" type="text/javascript"></script>
	<script src="/static/js/data.js" type="text/javascript"></script>
	<script src="/static/js/demo.js" type="text/javascript"></script>
    <script>


            $('#menu_student').addClass('active');
            $('#menu_student').next().removeClass('hide');

            $('#service').focus(function () {
                $('#ser').css('display','inline').fadeOut(3000)
            })
            $('#xxx').keyup(function () {
                var name = $('#service').val();
                var type = $('input[name="type"]').val();
                var tags = $('#t').val();
                console.log(tags)
                var address = $('#a').val();
                var port = $('input[name="port"]').val()
                var serviceId = 'prod_' + type + '_' + address + '_' + port
                $('#ret').text(serviceId)
            })

            // var port=$(':radio:checked').val()

            $('#sub').click(function () {
                var name = $('#service').val();
                var type = $('input[name="type"]').val();
                var tags = $('#t').val();
                console.log(tags)
                var address = $('#a').val();
                var port = $('input[name="port"]').val()
                var serviceId = 'prod_' + type + '_' + address + '_' + port

                if (name.length == 0) {
                    alert('不能为空')
                    return
                }
                console.log(name)
                $.ajax({
                    url: '/add_consul/',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        name: name,
                        type: type,
                        tags: tags,
                        address: address,
                        port: port,
                    },
                    success: function (rep) {
                        alert(rep.msg)
                    }
                })
            })

    </script>
{% endblock %}